<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { RegionSelects } from "v-region";
import { useRouter } from "vue-router";
import { createUser } from "@/apis";
import { useUserStore } from "@/store";
import { ElMessage } from "element-plus";

const status = ref("1");
const userName = ref("");
const password = ref("");
const password2 = ref("");
const phone = ref("");
const userStore = useUserStore();
const router = useRouter();

const company = ref("");
const legalName = ref("");

const showCompFormFlag = ref(false);

watch(status, (newVal) => {
  if (newVal == "3") {
    showCompFormFlag.value = true;
  } else {
    showCompFormFlag.value = false;
  }
});

const registerHandler = () => {
  if (password.value !== password2.value) {
    ElMessage.error("密码输入不一致！");
    return;
  }
  if (password.value == "" || userName.value == "" || phone.value == "") {
    ElMessage.error("请补全您的信息");
    return;
  }

  createUser(
    userName.value,
    password.value,
    region,
    status.value == "2",
    status.value,
    company.value,
    legalName.value,
    phone.value,
  )
    .then((res: any) => {
      if (status.value === "3") {
        ElMessage.success("注册信息提交成功，请等待审核！");
        return;
      }
      // console.log(res);
      userStore.setUID(res.data.uuid);
      userStore.setName(userName.value);
      userStore.setPwd(password.value);
      userStore.setStatus(parseInt(status.value));
      // alert("注册成功，三秒后自动登录");
      ElMessage.success("注册成功，三秒后自动登录");
    })
    .catch((err) => {
      console.log(err);
      ElMessage.error("注册失败！请检查您的网络。");
      return;
    });

  setTimeout(() => {
    router.push("registerSuccess");
  }, 3000);
};

const region = reactive({
  province: "110000",
  city: "110000",
  area: "0",
  town: "0",
});

function change(data: any) {
  console.log(data);
}
</script>

<template>
  <div class="total-register">
    <div class="title">
      <h1>欢迎新用户注册！</h1>
    </div>

    <div>
      <div class="input-item">
        <h3>您的姓名</h3>
        <el-input placeholder="在此输入您的姓名" v-model="userName"></el-input>
      </div>
      <div class="input-item">
        <h3>您的电话</h3>
        <el-input placeholder="在此输入您的手机号码" v-model="phone"></el-input>
      </div>
      <div class="input-item">
        <h3>密码</h3>
        <el-input type="password" v-model="password"></el-input>
      </div>

      <div class="input-item">
        <h3>确认密码</h3>
        <el-input type="password" v-model="password2"></el-input>
      </div>
      <div class="input-item">
        <h3>您的地区</h3>
        <el-container class="center-hold">
          <RegionSelects v-model="region" :area="false" @change="change" />
        </el-container>
      </div>
      <div class="input-item">
        <h3>注册身份</h3>
        <el-container class="status-radio center-hold">
          <el-radio-group v-model="status">
            <el-radio value="1" size="large">普通用户</el-radio>
            <el-radio value="2" size="large">专家用户</el-radio>
            <!--            <el-radio value="3" size="large">管理部门</el-radio>-->
            <!--            <el-radio value="4" size="large">管理员</el-radio>-->
          </el-radio-group>
        </el-container>
      </div>
      <div v-if="showCompFormFlag">
        <div class="input-item">
          <h3>企业名称</h3>
          <el-input v-model="company"></el-input>
        </div>
        <div class="input-item">
          <h3>法人姓名</h3>
          <el-input v-model="legalName"></el-input>
        </div>
      </div>
      <div>
        <el-button @click="registerHandler">注册用户</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.total-register {
  width: 60%; /* 设置宽度为50% */
  margin: 0 auto; /* 设置左右外边距为auto */
  text-align: center; /* 设置文本居中 */
  padding: 20px; /* 设置内边距 */
  height: 87vh;
}

.center-hold {
  display: flex;
  justify-content: center;
}

.input-item {
  width: 100%;
  display: flex;
  align-items: center;
}

.input-item h3 {
  margin-right: 20px; /* 设置<h3>标签右侧间距 */
  width: 20%;
}
</style>
